<template>
  <div class="p-20 pt-20 pb-20 box box-column">
    <div class="youxue-field box p-10 box box- box-column-center">
      <div class="left pr-10">
        <span>任务名称</span>
      </div>
      <div class="input border box-1">
        <input
          type="text"
          class="pl-10"
          v-model="name"
          disabled
          style="height: 30px; line-height: 30px;"
        />
      </div>
    </div>

    <div class="youxue-field p-10 box">
      <div class="left self-start mr-10">
        <span>任务描述</span>
      </div>
      <div class="input box-1">
        <textarea class="border" disabled></textarea>
      </div>
    </div>

    <div class="youxue-field box p-10 box-column-center">
      <div class="left pr-10">
        <span>好人币数量</span>
      </div>
      <div class="input border box-1">
        <input
          type="number"
          class="pl-10"
          disabled
          style="height: 30px; line-height: 30px;"
        />
      </div>
    </div>

    <div class="youxue-field box p-10 box-column-center">
      <div class="left pr-10">
        <span>已参与人数/总人数</span>
      </div>
      <div class="input border box-1 p-20 text-center">
        1/3
      </div>
    </div>

    <div class="youxue-field box p-10 box-column-center">
      <div class="left pr-10">
        <span>任务发布者</span>
      </div>
      <div class="input border box-1">
        <input
          type="number"
          class="pl-10"
          disabled
          style="height: 30px; line-height: 30px;"
        />
      </div>
    </div>

    <div class="youxue-field box p-10 box-column-center">
      <div class="left pr-10">
        <span>任务完成情况：</span>
      </div>
    </div>
    <!-- 情况 -->
    <ul class="canuse-table canuse-table--border">
      <!-- // 表头 -->
      <li class="th">
        <div class="td">参与人姓名</div>
        <div class="td">任务状态</div>
        <div class="td">已获得好人币</div>
      </li>

      <!-- // 表行 -->
      <li class="tr" v-for="n in 3" :key="n">
        <div class="td">业主{{ n }}:</div>
        <div class="td">未完成</div>
        <div class="td">{{ n }}</div>
      </li>
    </ul>

    <!-- 询问 -->
    <div class="box box-center p-20 box box-column">
      <div>请问你是否已经完成任务</div>
      <div class="box box-center mt-10">
        <canuse-button size="small" :type=" statusVal == 1 ? 'primary' : ''"  @click="changeStatus(1)"
          >是</canuse-button
        >
        <canuse-button :type=" statusVal == 0 ? 'primary' : ''" size="small" @click="changeStatus(0)">否</canuse-button>
      </div>
    </div>

    <!-- 点击弹窗 -->
    <canuse-modal
      confirm-text="确定"
      cancel-text="取消"
      confirm-class="cl-primary"
      v-model="show"
      @confirm="confirm"
      @cancel="cancel"
    >
      <div slot="title" class="text-center">提示</div>
      <div slot="content" class="text-center">
        确定修改任务完成状态?
      </div>
    </canuse-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "11",
      show: false,
      statusVal: 1
    };
  },

  methods: {
    // 修改任务状态弹窗
    changeStatus (val) {
      this.statusVal = val;
      this.show = true;
    },

    // 确定操作完成任务
    confirm() {},

    // 取消操作任务
    cancel () {
      this.statusVal = 1;
      this.show = false;
    }
  },
};
</script>

<style lang="scss" scoped></style>
